<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外发加工管理 - 测试页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        }
        h1 {
            color: #409EFF;
            text-align: center;
            margin-bottom: 30px;
        }
        .section {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #e4e7ed;
            border-radius: 4px;
        }
        .section h2 {
            color: #303133;
            margin-top: 0;
            margin-bottom: 15px;
            border-bottom: 2px solid #409EFF;
            padding-bottom: 10px;
        }
        .feature-list {
            list-style: none;
            padding: 0;
        }
        .feature-list li {
            padding: 8px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        .feature-list li:before {
            content: "✓";
            color: #67C23A;
            font-weight: bold;
            margin-right: 10px;
        }
        .api-test {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 4px;
            margin: 10px 0;
        }
        .api-test code {
            background-color: #e9ecef;
            padding: 2px 6px;
            border-radius: 3px;
            font-family: 'Courier New', monospace;
        }
        .status-tag {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            color: white;
        }
        .status-已外发 { background-color: #909399; }
        .status-加工中 { background-color: #E6A23C; }
        .status-已回厂 { background-color: #67C23A; }
        .status-已取消 { background-color: #F56C6C; }
        .note {
            background-color: #fff6f7;
            border-left: 4px solid #F56C6C;
            padding: 12px;
            margin: 15px 0;
        }
        .success {
            background-color: #f0f9ff;
            border-left: 4px solid #67C23A;
            padding: 12px;
            margin: 15px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>外发加工管理 - 功能测试</h1>
        
        <div class="section">
            <h2>📋 功能概述</h2>
            <p>外发加工管理模块提供了完整的PCB外发加工流程管理，包括外发单创建、状态跟踪、供应商管理等功能。</p>
            <ul class="feature-list">
                <li>外发单列表查询和分页显示</li>
                <li>多条件搜索（外发单号、供应商、产品名称、状态等）</li>
                <li>新增外发单（支持供应商选择和自动计算金额）</li>
                <li>外发单详情查看</li>
                <li>外发状态更新管理</li>
                <li>外发单删除（有状态限制）</li>
                <li>供应商下拉选择（支持自定义输入）</li>
            </ul>
        </div>

        <div class="section">
            <h2>🏷️ 状态管理</h2>
            <p>外发加工支持以下状态流转：</p>
            <div style="margin: 15px 0;">
                <span class="status-tag status-已外发">已外发</span> →
                <span class="status-tag status-加工中">加工中</span> →
                <span class="status-tag status-已回厂">已回厂</span>
            </div>
            <div style="margin: 15px 0;">
                <span class="status-tag status-已取消">已取消</span> （任意状态都可取消，除非已回厂）
            </div>
            
            <div class="note">
                <strong>注意：</strong>
                <ul>
                    <li>已回厂和已取消状态的外发单不能再更新状态</li>
                    <li>已回厂的外发单不能删除</li>
                    <li>状态更新为"已回厂"时需要填写实际回厂日期</li>
                </ul>
            </div>
        </div>

        <div class="section">
            <h2>🔧 API接口测试</h2>
            
            <div class="api-test">
                <strong>1. 获取外发单列表</strong><br>
                <code>GET /api/outsourcing</code><br>
                支持参数：current, size, outsourcingNo, supplierCode, supplierName, productName, status, startDate, endDate, quotationNo
            </div>

            <div class="api-test">
                <strong>2. 创建外发单</strong><br>
                <code>POST /api/outsourcing</code><br>
                必填字段：supplierCode, supplierName, productName, quantity, outsourcingDate
            </div>

            <div class="api-test">
                <strong>3. 更新外发状态</strong><br>
                <code>PUT /api/outsourcing/{id}/status</code><br>
                请求体：{"status": "新状态", "actualReturnDate": "2024-01-01"}
            </div>

            <div class="api-test">
                <strong>4. 获取供应商选项</strong><br>
                <code>GET /api/outsourcing/supplier-options</code><br>
                返回格式：[{"code": "S001", "name": "供应商A"}]
            </div>
        </div>

        <div class="section">
            <h2>💡 使用指南</h2>
            <ol>
                <li><strong>创建外发单：</strong>点击"新增外发单"按钮，填写必要信息。供应商支持下拉选择或自定义输入。</li>
                <li><strong>查询外发单：</strong>使用搜索条件可以快速找到目标外发单，支持多种组合查询。</li>
                <li><strong>查看详情：</strong>点击"详情"按钮查看外发单完整信息。</li>
                <li><strong>更新状态：</strong>点击"更新状态"按钮，选择新状态。如果是"已回厂"需要填写实际回厂日期。</li>
                <li><strong>删除外发单：</strong>只有未回厂的外发单才能删除，已回厂的不允许删除。</li>
            </ol>
        </div>

        <div class="section">
            <h2>🎯 测试要点</h2>
            <ul class="feature-list">
                <li>验证表单验证规则（必填字段、数据格式等）</li>
                <li>测试供应商选择和自动填充功能</li>
                <li>验证金额自动计算功能（数量 × 单价）</li>
                <li>测试状态流转和业务规则限制</li>
                <li>验证分页和搜索功能</li>
                <li>测试日期选择和格式化显示</li>
                <li>验证删除和状态更新的权限控制</li>
            </ul>
        </div>

        <div class="success">
            <strong>✅ 开发完成状态：</strong><br>
            外发加工管理模块前端开发已完成，包含完整的CRUD功能、状态管理、搜索过滤、表单验证等功能。
            所有功能都按照API文档规范实现，支持与后端服务的完整对接。
        </div>

        <div class="section">
            <h2>📱 组件特性</h2>
            <ul class="feature-list">
                <li>响应式设计，适配不同屏幕尺寸</li>
                <li>Element Plus组件库，保证UI一致性</li>
                <li>Vue 3 Composition API，现代化开发体验</li>
                <li>完善的错误处理和用户提示</li>
                <li>数据格式化显示（金额、日期时间等）</li>
                <li>表单验证和输入限制</li>
                <li>加载状态和按钮防重复点击</li>
                <li>确认对话框保护重要操作</li>
            </ul>
        </div>
    </div>
</body>
</html> 